<template>
  <div class="order-detail">
    <div class="order-detail__select">
      <div class="order-detail__select-city">
        <el-select v-model="city" size="mini" @change="changeCity">
          <el-option
            v-for="(item, i) in cityList"
            :key="i"
            :label="item"
            :value="item"
            >
          </el-option>
        </el-select>
      </div>
      <div class="order-detail__select-zones">
        <el-select v-model="zoneId" size="mini" @change="getOrderList">
          <el-option
            v-for="item in zonesList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="order-detail__content" v-for="(item,index) in orderData" :key="index" :class="{active: (index+1)%2 !== 0 }">
      <span class="cont">{{item.content}}</span>
      <span class="red" v-if="item.status === '待派工' || item.status === '待处理'">【{{item.status}}】</span>
      <span class="orange" v-else-if="item.status === '待接单'">【{{item.status}}】</span>
      <span class="blue" v-else-if="item.status === '待完成' || item.status === '处理中'">【{{item.status}}】</span>
      <span class="green" v-else-if="item.status === '已完成' || item.status === '已处理'">【{{item.status}}】</span>    
      <span v-else>【{{item.status}}】</span>
    </div>
  </div>
</template>
<script>
import { Select, Option } from 'element-ui'
import {
getOrderList,
getZonesList
} from 'src/api/api'
import storage from 'good-storage'
export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option,
  },
  data() {
    return {
      orderData: [],
      socket: '',
      setInterval: '',
      cityList: storage.get('cityList'),
      city: '杭州',
      zonesList: [],
      zoneId: 14,
    }
  },
  mounted() {
    this._getZonesList()
    this.getOrderList()
    this.setInterval = setInterval(() => {
      this.getOrderList()
    }, 1000 * 5)
  },
  beforeDestroy() {
    clearInterval(this.setInterval)
  },
  methods: {
    _getZonesList() {
      let params = {
        city: this.city
      }
      getZonesList(params).then(res=> {
        if (res.success === true) {
          this.zonesList = res.data
        }
      })
    },
    getOrderList() {
      this.orderData = []
      const params = {
        type: 14,
        zoneId: this.zoneId
      }
      getOrderList(params).then(res => {
        let list = res.data.list.slice(0,19)
        if(list && list.length > 0) {
          list.forEach(item=>{
            this.orderData.push(JSON.parse(item.dataInfo))
          })
        }
      })
    },
    changeCity() {
      let params = {
        city: this.city
      }
      getZonesList(params).then(res=> {
        if (res.success === true) {
          this.zonesList = res.data
          this.zoneId = res.data[0].id
          this.getOrderList()
        }
      })
    }
  }
}
</script>
<style lang="scss">
.order-detail {
  // height: 100%;
  font-size: 13px;
  padding: 7px 10px 10px;
  height: 377px;
  overflow: auto;
  &__content {
    display: flex;
    justify-content: space-between;
    height: 36px;
    line-height: 36px;
    flex-wrap: nowrap;
    padding: 0 10px;
    .cont {
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .red {
      color: #FF3150;
    }
    .orange {
      color: #FFA919;
    }
    .blue {
      color: #45F0EA;
    }
    .green {
      color: #53ED73;
    }
  }
  &__select {
    text-align: right;
    padding: 5px 0px 5px 0;
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #AAECFF;
    .el-select, .el-date-editor {
      .el-input__inner {
        // width: 150px;
        border: 0;
        border-radius: 0;
        background:rgba(11,21,58,1);
        box-shadow:1px 1px 0px 0px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 1);
        color: #AAECFF;
        font-size: 14px;
      }
      .el-input__icon {
        color: #AAECFF;
        font-size: 14px;
      }
    }
    &-zones {
      // margin-right: 20px;
      .el-select {
        width: 120px;
      }
    }
    &-city {
      margin-right: 20px;
      .el-select {
        width: 80px;
      }
    }
  }
  .active {
    background:rgba(255,255,255,0.1);
  }
}
/* 设置滚动条的样式 */
  .order-detail::-webkit-scrollbar {
    width:10px;
  }
  /* 滚动槽 */
  .order-detail::-webkit-scrollbar-track {
    border-radius: 5px;
    // background-color: #eee;
  }
  /* 滚动条滑块 */
  .order-detail::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #606981;
  }
</style>
